<template>
  <div class="projects-container">
    <h1 class="text-h3 q-mb-xl text-center animate-slide-down">项目经历</h1>
    
    <!-- 项目分类过滤器 -->
    <div class="filters-container q-mb-lg animate-slide-right">
      <q-chip-group
        v-model="selectedCategory"
        class="q-mb-md"
      >
        <q-chip
          clickable
          v-for="category in categories"
          :key="category"
          :label="category"
          color="primary"
          text-color="white"
          outline
          :selected="selectedCategory === category"
        />
      </q-chip-group>
      
      <q-input
        v-model="searchText"
        outlined
        dense
        clearable
        placeholder="搜索项目..."
        class="search-input"
      >
        <template v-slot:prepend>
          <q-icon name="search" />
        </template>
      </q-input>
    </div>
    
    <!-- 项目列表 -->
    <div class="row q-col-gutter-lg">
      <div 
        v-for="(project, index) in filteredProjects" 
        :key="project.id" 
        class="col-12"
        :class="`animate-slide-up delay-${index % 5 + 1}`"
      >
        <q-card class="project-card hover-lift">
          <q-card-section horizontal>
            <q-card-section class="col-md-8 col-12">
              <div class="text-h5">{{ project.title }}</div>
              <q-badge v-for="tag in project.tags" :key="tag" :label="tag" class="q-mr-xs q-mb-xs" color="secondary" />
              <div class="q-mt-md">{{ project.description }}</div>
              
              <q-expansion-item
                label="详细内容"
                icon="more_vert"
                header-class="text-primary"
                class="q-mt-md"
              >
                <q-card>
                  <q-card-section>
                    <p v-html="project.content"></p>
                    
                    <div class="text-subtitle2 q-mt-md">技术栈:</div>
                    <q-chip 
                      v-for="tech in project.technologies" 
                      :key="tech" 
                      :label="tech" 
                      outline
                      class="animate-bounce"
                    />
                    
                    <div v-if="project.features && project.features.length > 0">
                      <div class="text-subtitle2 q-mt-md">主要功能:</div>
                      <q-list dense>
                        <q-item v-for="(feature, idx) in project.features" :key="idx" :class="`animate-fade-in delay-${idx % 5 + 1}`">
                          <q-item-section avatar>
                            <q-icon color="positive" name="check_circle" />
                          </q-item-section>
                          <q-item-section>{{ feature }}</q-item-section>
                        </q-item>
                      </q-list>
                    </div>
                  </q-card-section>
                  
                  <q-card-actions align="right">
                    <q-btn
                      v-if="project.demoUrl"
                      flat
                      color="primary"
                      label="查看演示"
                      :href="project.demoUrl"
                      target="_blank"
                      class="animate-pulse"
                    />
                    <q-btn
                      v-if="project.repoUrl"
                      flat
                      color="secondary"
                      label="源码仓库"
                      :href="project.repoUrl"
                      target="_blank"
                      class="animate-pulse"
                    />
                  </q-card-actions>
                </q-card>
              </q-expansion-item>
            </q-card-section>
            
            <q-card-section v-if="project.image" class="col-md-4 col-12 project-image-section">
              <q-img
                :src="project.image"
                spinner-color="primary"
                spinner-size="82px"
                class="project-image animate-fade-in"
              />
            </q-card-section>
          </q-card-section>
          
          <q-separator />
          
          <q-card-section class="row items-center">
            <div class="text-caption">
              完成时间: {{ project.completionDate }}
            </div>
            <q-space />
            <q-btn
              flat
              round
              color="primary"
              icon="share"
              class="animate-float"
            >
              <q-tooltip>分享项目</q-tooltip>
            </q-btn>
            <q-btn
              flat
              round
              color="grey-7"
              icon="favorite"
              class="animate-float"
            >
              <q-tooltip>收藏项目</q-tooltip>
            </q-btn>
          </q-card-section>
        </q-card>
      </div>
    </div>
    
    <!-- 没有找到项目的提示 -->
    <div v-if="filteredProjects.length === 0" class="text-center q-pa-xl animate-fade-in">
      <q-icon name="search_off" size="4rem" color="grey-5" />
      <p class="text-subtitle1 q-mt-sm">未找到匹配的项目，请尝试其他搜索条件</p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

const expandedProject = ref(null)

const projects = ref([
  {
    id: 1,
    title: '个人博客系统',
    date: '2023 - 至今',
    year: 2023,
    role: '全栈开发工程师',
    description: '使用 Vue 3 和 Quasar 开发的个人博客系统，包含文章管理、评论系统等功能。整个系统采用前后端分离架构，前端使用 Vue 3 和 Quasar，后端使用 Node.js 和 Express。',
    technologies: ['Vue 3', 'Quasar', 'Vue Router', 'Node.js', 'Express', 'MongoDB'],
    responsibilities: [
      '负责整体架构设计和开发',
      '实现响应式布局和用户交互',
      '集成评论系统和文章管理功能',
      '优化网站性能和用户体验'
    ],
    achievements: '网站加载速度提升了50%，用户互动率增加30%。',
    image: 'https://picsum.photos/800/450?random=1',
    links: {
      'GitHub': 'https://github.com/',
      '在线演示': 'https://example.com'
    }
  },
  {
    id: 2,
    title: '电商平台',
    date: '2021 - 2023',
    year: 2021,
    role: '前端开发工程师',
    description: '为某电商公司开发的电子商务平台，支持商品展示、购物车、支付系统、订单管理等功能。',
    technologies: ['React', 'Redux', 'Node.js', 'MySQL', 'Docker'],
    responsibilities: [
      '负责前端架构设计和开发',
      '实现购物车和结算功能',
      '对接支付系统API',
      '优化页面加载速度和响应性'
    ],
    achievements: '平台上线后第一个月成交额达100万元，用户留存率高达85%。',
    image: 'https://picsum.photos/800/450?random=3',
    links: {
      '在线演示': 'https://example.com'
    }
  },
  {
    id: 3,
    title: '企业管理系统',
    date: '2019 - 2021',
    year: 2019,
    role: '前端团队负责人',
    description: '为某大型企业开发的内部管理系统，包含人员管理、资源调度、报表分析等模块。',
    technologies: ['Angular', 'TypeScript', '.NET Core', 'SQL Server'],
    responsibilities: [
      '带领5人团队完成前端开发',
      '设计系统架构和技术栈选型',
      '实现复杂的数据可视化功能',
      '与后端团队协作完成API对接'
    ],
    achievements: '系统上线后，企业运营效率提升35%，数据处理时间缩短50%。',
    image: 'https://picsum.photos/800/450?random=4'
  },
  {
    id: 4,
    title: '移动应用开发',
    date: '2018 - 2019',
    year: 2018,
    role: '跨平台开发工程师',
    description: '开发了一款健康管理移动应用，支持饮食记录、运动跟踪、健康数据分析等功能，适用于iOS和Android平台。',
    technologies: ['Flutter', 'Dart', 'Firebase', 'RESTful API'],
    responsibilities: [
      '负责应用UI/UX设计与实现',
      '开发核心功能模块',
      '优化应用性能与响应速度',
      '实现数据同步与云存储功能'
    ],
    achievements: '应用在上线后三个月内用户量突破10万，获得4.7星的用户评分。',
    image: 'https://picsum.photos/800/450?random=5',
    links: {
      'GitHub': 'https://github.com/',
      '应用下载': 'https://example.com'
    }
  }
])

const searchQuery = ref('')
const selectedTechs = ref([])
const minYear = 2018
const maxYear = new Date().getFullYear()
const yearRange = ref({
  min: minYear,
  max: maxYear
})

const techOptions = computed(() => {
  const techs = new Set()
  projects.value.forEach(project => {
    project.technologies.forEach(tech => techs.add(tech))
  })
  return Array.from(techs).map(tech => ({ label: tech, value: tech }))
})

const filteredProjects = computed(() => {
  return projects.value.filter(project => {
    // 筛选项目名称
    if (searchQuery.value && !project.title.toLowerCase().includes(searchQuery.value.toLowerCase())) {
      return false
    }
    
    // 筛选技术栈
    if (selectedTechs.value.length > 0) {
      const hasSelectedTech = project.technologies.some(tech => selectedTechs.value.includes(tech))
      if (!hasSelectedTech) return false
    }
    
    // 筛选年份
    if (project.year < yearRange.value.min || project.year > yearRange.value.max) {
      return false
    }
    
    return true
  })
})

const toggleProject = (projectId) => {
  if (expandedProject.value === projectId) {
    expandedProject.value = null
  } else {
    expandedProject.value = projectId
  }
}

onMounted(() => {
  // 自动展开第一个项目以供演示
  if (projects.value.length > 0) {
    expandedProject.value = projects.value[0].id
  }
})
</script>

<style scoped>
.project-card {
  border-radius: 12px;
  transition: transform 0.3s;
}

.project-card:hover {
  transform: translateY(-2px);
}

.project-date {
  background: rgba(0,0,0,0.6);
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
}
</style> 